<template>
    <div class="view">
        <div class="back" @click="back"><i class="cubeic-back"></i></div>
        <div class="scan-box">
            <div class="scan-box-wrap">
                <div class="scan-box-wrap-corner scan-box-wrap-corner-lt"></div>
                <div class="scan-box-wrap-corner scan-box-wrap-corner-rt"></div>
                <div class="scan-box-wrap-corner scan-box-wrap-corner-lb"></div>
                <div class="scan-box-wrap-corner scan-box-wrap-corner-rb"></div>
                <div class="scan-box-wrap-line"></div>
                <div class="flashlight" @click="tapFlashlight">
                    <i class="iconfont icon-shoudiantong"></i>
                    <div class="flashlight-text">{{openFlashlight?'关闭手电':'打开手电'}}</div>
                </div>
            </div>
        </div>
        <div class="scan-tips">{{scanTips}}</div>

    </div>
</template>

<script lang="ts">
    import {Component, Vue, Watch} from "vue-property-decorator";
    import Scene from "@/render/Scene";

    import {Getter, Action, State, Mutation} from "vuex-class";
    import CommonUnit from "@/unit/CommonUnit";

    @Component({})
    export default class ScanCode extends Scene {
        private openFlashlight: boolean = false;

        private back(): void {
            QRScanner.destroy((status: any) => {
                this.navigateBack(-1, false);
            });
        }

        private get scanTips(): string {
            return String(this.$route.query.tips || "请扫描二维码");
        }

        private get eventName(): string {
            return String(this.$route.query.eventName || "scanCode");
        }

        private mounted() {
            QRScanner.prepare((err: any, status: any) => {
                if (err) {
                    this.back();
                } else if (status.authorized) {
                    QRScanner.scan(this.displayContents);
                    QRScanner.show();
                } else {
                    //    拒绝权限
                    this.back();
                }
            });
        }


        private displayContents(err: any, text: string) {
            if (err) {
                // an error occurred, or the scan was canceled (error code `6`)
                console.log("启动扫描出错：" + JSON.stringify(err));
            } else {
                // The scan completed, display the contents of the QR code:
                (<any> this).$bus.$emit(this.eventName, text);
                this.back();
            }
        }

        private tapFlashlight(): void {
            if (this.openFlashlight) {
                QRScanner.disableLight((err: string, status: any) => {
                    this.openFlashlight = status.lightEnabled;
                });
            } else {
                QRScanner.enableLight((err: string, status: any) => {
                    this.openFlashlight = status.lightEnabled;
                });
            }


        }
    }
</script>

<style scoped lang="stylus">
    .view
        background rgba(255, 255, 255, 0)
        position relative;
        width 100vw;
        height 100vh;
        overflow hidden

        .back
            width 32px;
            height 32px;
            position absolute;
            left 12px;
            top calc(5px + var(--safe-area-inset-top));
            background #8C8C8C;
            opacity .5;
            border-radius 50%;
            display flex;
            justify-content center;
            align-items center;
            color #fff;
            font-size 18px;
            z-index 101;

        .scan-box
            width var(--scan-size);
            height var(--scan-size);
            position relative;
            box-sizing content-box;
            border-color rgba(0, 0, 0, .7);
            border-style solid;
            border-top-width calc((100vh - var(--safe-area-inset-top) - var(--scan-size)) / 3 + var(--safe-area-inset-top));
            border-right-width calc((100vw - var(--scan-size)) / 2);
            border-bottom-width calc((100vh - var(--safe-area-inset-top) - var(--scan-size)) / 3 * 2);
            border-left-width calc((100vw - var(--scan-size)) / 2);

            .scan-box-wrap
                width var(--scan-size);
                height var(--scan-size);
                position relative;

                .scan-box-wrap-corner
                    position absolute;
                    height calc(var(--scan-size) / 7);
                    width calc(var(--scan-size) / 7);
                    border-style solid;
                    border-color $theme-common-color
                    opacity .9

                    &.scan-box-wrap-corner-lt
                        border-top-width 3px
                        border-left-width 3px

                    &.scan-box-wrap-corner-rt
                        border-top-width 3px
                        border-right-width 3px
                        right 0;

                    &.scan-box-wrap-corner-lb
                        border-bottom-width 3px
                        border-left-width 3px
                        bottom 0

                    &.scan-box-wrap-corner-rb
                        border-bottom-width 3px
                        border-right-width 3px
                        bottom 0
                        right 0;

                .scan-box-wrap-line
                    width 100%
                    position absolute;
                    height 1.5px;
                    top 0;
                    left 0
                    background $theme-advancing-color
                    animation: scan-box-wrap-line-animation ease-in-out 3s infinite alternate;

            .flashlight
                position absolute;
                bottom -85px;
                width 65px;
                height 65px;
                display flex;
                left calc((var(--scan-size) - 65px) / 2)
                align-items center
                justify-content center
                flex-direction column
                color #fff;

                i.iconfont
                    font-size 30px;

                .flashlight-text
                    margin-top 10px;

        .scan-tips
            position absolute
            bottom 50px
            color #fff;
            text-align center;
            line-height 1.4em;
            width 100%;
            font-size 15px;

    $keyframe-name = scan-box-wrap-line-animation
    @keyframes {$keyframe-name}
        from {
            top: 0;
        }
        to {
            top: var(--scan-size);
        }

</style>
<style>
    :root {
        --scan-size: 180px;
    }
</style>
